<template>
  <div class="forget-password">
    <van-form @submit="onSubmit" v-show="step == 1" ref="oneRef">
      <van-cell-group inset>
        <van-field name="mobile" v-model="mobile" label="+86" placeholder="请输入手机号" :rules="[
          { required: true, trigger: 'onBlur', message: '请输入手机号' },
          {
            validator: valiPhone,
            message: '请输入正确格式手机号',
          },
        ]" />
        <van-field v-model="sms" label="" placeholder="请输入验证码" :rules="[
          { required: true, trigger: 'onBlur', message: '请输入验证码' },
          {
            validator: valiCode,
            message: '请输入正确验证码',
          },
        ]">
          <template #button>
            <div class="codes" @click="onGetCode" v-throttle:click>{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
            </div>
          </template>
        </van-field>
      </van-cell-group>
      <van-button class="nextStep" round block type="primary" native-type="submit" v-throttle:click>
        下一步
      </van-button>
    </van-form>
    <van-form @submit="onSubmit" v-show="step == 2">
      <van-cell-group inset>
        <van-field :type="newPasswordFlag ? 'password' : 'text'" v-model="newPassword" label="" placeholder="请输入新密码"
          :rules="[
            { required: true, trigger: 'onBlur', message: '请输入新密码' },
            {
              validator: correctPassword,
              message: '请输入6到16位包含英文，数字，符号的密码',
            },
          ]">
          <template #right-icon>
            <img class="icons" :src="newPasswordFlag ? zhengyan : biyan" alt=""
              @click="newPasswordFlag = !newPasswordFlag">
          </template>
        </van-field>
        <van-field :type="confirmPasswordFlag ? 'password' : 'text'" v-model="confirmPassword" label=""
          placeholder="请再次输入新密码" :rules="[
            { required: true, trigger: 'onBlur', message: '请再次输入新密码' },
            {
              validator: valiConfirmPassword,
              message: '两次密码不一致',
            },
          ]">
          <template #right-icon>
            <img class="icons" :src="confirmPasswordFlag ? zhengyan : biyan" alt=""
              @click="confirmPasswordFlag = !confirmPasswordFlag">
          </template>
        </van-field>
      </van-cell-group>
      <van-button class="nextStep" round block type="primary" native-type="submit" v-throttle:click>
        确定修改
      </van-button>
    </van-form>
    <div v-show="isShow" class="overlay">
      <Vcode :show="isShow" @success="onSuccess" type="inside" @close="onClose" :imgs="imgs" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { findPasswordCode, findPasswordCheckCode, resetUserPwd } from '@/api/loginApi'
import Vcode from "vue3-puzzle-vcode";
import { ref } from 'vue'
import { showFailToast, showSuccessToast } from "vant";
import router from '@/router';
const zhengyan = new URL("@/assets/productHome/icon_zhengyan.png", import.meta.url).href;
const biyan = new URL("@/assets/productHome/icon_biyan.png", import.meta.url).href;

// 新密码标识
const newPasswordFlag = ref(true)
// 确认密码标识
const confirmPasswordFlag = ref(true)
const oneRef = ref()
const mobile = ref<number>()
const sms = ref<number>()
// 倒计时
const countdown = ref(0)
// 计时器
const timer = ref<any>(null)
// 新密码
const newPassword = ref()
// 确认密码
const confirmPassword = ref()

// 步骤
const step = ref(1)
// 手机号验证
const valiPhone = (val) => /^1[3-9]\d{9}$/.test(val)
// 验证码验证
const valiCode = (val) => /^[0-9]{4}$/.test(val)
// 密码格式验证
const correctPassword = (val) => /^[0-9a-zA-Z!@#$%^&*(),.?":{}|<>]{6,16}$/.test(val)
// 确认密码验证
const valiConfirmPassword = (val) => {
  if (val && newPassword.value == val) {
    return true
  } else {
    return false
  }
}


// 人机验证弹窗
const isShow = ref(false);
const imgs = ref([
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F0406210Z024%2F2104060Z024-11-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050452&t=a8eeec2f6f7b4aff883b85ee2276ea4d",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668047974&t=0545a1395151b9e52e3ae13d4c1f3a9d",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F033021091503%2F210330091503-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050510&t=b07c3793fe21bd8cb17e2490a11b664d",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668050503&t=63bbb5a9c3ac56b66f20240b63e98f34",
]);

/** 下一步 */
const onSubmit = async () => {
  if (step.value == 1) {
    isShow.value = true
  } else {
    await resetUserPwd({ phone: mobile.value, newPassword: newPassword.value })
    showSuccessToast('修改密码成功')
    router.push('/login')
  }
}

/** 获取验证码 */
const onGetCode = async () => {
  await oneRef.value.validate('mobile')
  if (countdown.value > 0) {
    showFailToast("验证码已发送，请勿重复点击");
  } else {
    await findPasswordCode({
      phone: mobile.value,
    }).then(() => {
      showSuccessToast('验证码发送成功')
      startCountdown()
    })
  }
}

// 倒计时
const startCountdown = () => {
  countdown.value = 60; // 设置倒计时时间为60秒
  timer.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
}


const onClose = () => {
  isShow.value = false;
};

const onSuccess = async () => {
  onClose(); // 验证成功，手动关闭模态框
  await findPasswordCheckCode({ phone: mobile.value, code: sms.value })
  step.value = 2
};

</script>

<style lang="less" scoped>
.forget-password {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 25px;
  .flex-column;
  .flex-center;

  .van-form {
    width: 100%;
  }

  :deep(.van-cell-group--inset) {
    border-radius: 0;
    border-bottom: 1px solid rgba(174, 188, 212, 0.3);
    margin: 0 !important;
  }

  :deep(.van-cell) {
    padding: 14px 0 15px;

    &__title {
      margin-right: 0 !important;
      width: 40px !important;
    }

    &-group {
      width: 100%;
    }

    .codes {
      font-weight: 400;
      font-size: 16px;
      color: #0094FF;
    }

    &__title {
      margin-right: 20px;
      width: 60px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: @main-text-color;
    }

    &::after {
      left: 0;
      right: 0;
      border-bottom: 1px solid rgba(174, 188, 212, 0.3);
      transform: none;
    }
  }

  &-title {
    margin: 0 auto 57px;
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    text-align: center;
    color: @main-text-color;
  }

  .icons {
    width: 20px;
    height: 20px;
  }

  .nextStep {
    width: 325px;
    height: 48px;
    background: #0094FF;
    border-radius: 24px;
    text-align: center;
    line-height: 48px;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 30px;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .overlay {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: rgb(76, 76, 76);
  }

  :deep(.vue-puzzle-vcode) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
